<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>append追加元素</title>
  <script src="../jquery/jquery-3.3.1.min.js"></script>
  <style>
    #sd,#city{
      width: 600px;
      height: 400px;
      border: 2px solid lightblue;
      padding: 5px;
      box-sizing: border-box;
      margin: 20px;
      float: left;
    }
    span{
      width: 50px;
      display: block;
      float: left;
      margin: 5px;

    }
  </style>
  <script>
    $(function (){

      $("span:odd").css({"boder":"1px solid lightblue","backgroundColor":"lightblue"});

      $("span:even").css({"boder":"1px solid pink","backgroundColor":"pink"});

      $("#city span").click(function (){
        var sd=$("#sd");
       // sd.append(this);
        sd.prepend(this);
       // $(this).prependTo(sd);
        //appendTo
        //preappendTo
      });

    });

  </script>
</head>
<body>
<h1>挑选山东的城市</h1>
<div id="sd">

</div>
<div id="city">
<span>北京</span><span>上海</span><span>广州</span><span>济南</span><span>杭州</span><span>青岛</span><span>潍坊</span><span>大连</span>
  <span>泉州</span><span>武汉</span><span>烟台</span><span>合肥</span><span>石家庄</span><span>西安</span><span>郑州</span><span>临沂</span>
  <span>泉州</span><span>南京</span><span>威海</span><span>天津</span><span>德州</span><span>哈尔滨</span><span>枣庄</span>
</div>
</body>
</html>